<template>
	<view class="wp">
		<view class="tab">
			<view :class="hov[index]" v-for="(item, index) in tab" :key="index" @click="sho(index)">
				{{ item }}
				<text class="lin" :style="bol[index]"></text>
			</view>
		</view>
		<view class="ms-pic my-shear" v-if="bols[0]" :style="'height:'+(h-57)+'px;'">
			<img src="../../static/shear.png" alt="" class="img-s"/>
			<view class="shear-btns">
				<view class="btns">
					<button data-name="shareBtn" open-type="share">转发</button>
					<button @click="saveImg">保存图片</button>
				</view>
			</view>
			<!-- <view class="ms-user">
				<image :src="src"></image>
				<text>{{txt}}</text>
			</view>
			<view class="ms-pict"></view> -->
			
		</view>
		<view v-if="bols[1]" class="ms-pic" >
			<view class="ms-us">我的</view>
			<view class="ms-u" v-for="(item, index) in users" :key="index">
				<image :src="src"></image>
				<view class="ms-txt">
					<text>{{txt}}</text>
				    <text>微信号：{{item.wxnum}}</text>
				</view>
				<button type="default" >{{item.wxbut}}</button>
			</view>
		</view>
		<view v-if="bols[1]" class="ms-pic" >
			<view class="ms-us">我邀请的人</view>
			<view class="ms-u" v-for="(item, index) in wxuser" :key="index">
				<image :src="src"></image>
				<view class="ms-txt">
					<text>{{txt}}</text>
				    <text>微信号：{{item.wxnum}}</text>
				</view>
				<button type="default" >{{item.wxbut}}</button>
			</view>
		</view>
		<detail-fine v-if="bols[2]" />
	</view>
</template>

<script>
import Vue from 'vue';
import DetailFine from'../user/detailFine';
import url from '../../components/hosturl.js';
export default {
	data() {
		return {
			h:600,
			tab: ['我要分享', '分享者','订单明细'],
			bol: [],
			hov: ['tab-hov'],
			src:'',
			txt:'',
			bols:[true,false,false],
			users:[
				{wxnum:235166466,wxbut:'修改微信号'}
			],
			wxuser:[
				{wxnum:235166467,wxbut:'复制微信号'},
				{wxnum:865312489,wxbut:'复制微信号'},
				{wxnum:123561355,wxbut:'复制微信号'},
			],
			imgUrl:'https://c-ssl.duitang.com/uploads/item/201410/09/20141009224754_AswrQ.thumb.1900_0.jpeg'
		};
	},
	methods: {
		//微信小程序保存到相册
		handleSetting(e){
			var that = this;
			if (!e.detail.authSetting['scope.writePhotosAlbum']) {
				  that.openSettingBtnHidden = false;
			} else {
				 that.openSettingBtnHidden = true;
			}
		},
		// 保存图片
		saveImg(){
			var that = this;
			//获取相册授权
		   uni.getSetting({
			 success(res) {
			   if (!res.authSetting['scope.writePhotosAlbum']) {
				 uni.authorize({
				   scope: 'scope.writePhotosAlbum',
				   success() {
					 //这里是用户同意授权后的回调
					 that.saveImgToLocal();
				   },
				   fail() {//这里是用户拒绝授权后的回调
					   that.openSettingBtnHidden=false
				   }
				 })
			   } else {//用户已经授权过了
				 that.saveImgToLocal();
			   }
			 }
		   });
		},
		saveImgToLocal:function(e){
               
			uni.showModal({
				title: '提示',
				content: '确定保存到相册吗',
				success: (res)=> {
					if (res.confirm) {
						
						uni.downloadFile({
							url: this.imgUrl,//图片地址
							success: (res) =>{
								if (res.statusCode === 200){
									uni.saveImageToPhotosAlbum({
										filePath: res.tempFilePath,
										success: function() {
											uni.showToast({
												title: "保存成功",
												icon: "none"
											});
										},
										fail: function() {
											uni.showToast({
												title: "保存失败",
												icon: "none"
											});
										}
									});
								} 
							}
						});
					} else if (res.cancel) {
						
					}
				}
			});
			
		},
		sho(e) {
			for(let i in this.bols){
				Vue.set(this.bols,i,false);
				i==e&&Vue.set(this.bols,i,true);
			}
			for (var i = 0; i < this.tab.length; i++) {
				Vue.set(this.bol, i, 'background-color:#fff;');
				Vue.set(this.hov, i, '');
				i == e && Vue.set(this.bol, i, 'background-color:#a286eb;') && Vue.set(this.hov, i, 'tab-hov');
			}
			if(e==1){
				uni.request({
					url:url+'/Me/getSubordinate',
					methods:'GET',
					data:{
						token:uni.getStorageSync('token'),
					},
					success(res){
						var data=res.data.msg;
						if(data=='空空如也'){
							uni.showModal({
							    content: '空空如也',
							    success: function (res) {
							       console.log('确定')
							    }
							});
						}else{
							var obj={wxnum:data.wxh,wxbut:'修改微信号'}
							this.users.push(obj);
							uni.request({
								url:url+'/Me/getSubordinate',
								methods:'GET',
								data:{
									token:uni.getStorageSync('token'),
									'id':data.id
								},
								success(res){
									var data1=res.data.msg;
									if(data1=='空空如也'){
										uni.showModal({
										    content: '暂未邀请',
										    success: function (res) {
										       
										    }
										})
									}else{
										for(let i in data1){
											var obj1={wxnum:data.wxh,wxbut:'修改微信号'}
											this.wxuser.push(obj1);
										}
									}
									
								}
								})
						}
					}
				})
			}
		}
	},
	components:{
		DetailFine
	},
	onReady() {
		
	},
	onLoad() {
		// 设置高度
		uni.getSystemInfo({
			success:res=> {
				this.h = res.windowHeight;
			}
		});
		uni.setNavigationBarTitle({
			title: '我的分享'
		});
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: '#a286eb'
		});
		let _this = this;
		uni.login({
		  provider: 'weixin',
		  success: function (loginRes) {
		    // 获取用户信息
		    uni.getUserInfo({
		      provider: 'weixin',
		      success: (infoRes)=> {
				_this.src=infoRes.userInfo.avatarUrl;
				_this.txt=infoRes.userInfo.nickName;
		      }
		    });
		  }
		});
		this.bol.push('background-color:#a286eb;');
		
	}
};
</script>

<style>
.wp {background-color: #f8f8f8;color: #303133;font-size: 28rpx;}
.tab {align-items: center;background-color: #fff;border-bottom: 1rpx #d6d6d6 solid;display: flex;justify-content: center;line-height: 100rpx;}
.tab-hov {color: #a286eb;}
.tab .lin {background-color: #fff;display: block;height: 5rpx;width: 30rpx;margin: 0 auto;}
.tab view {flex: 1;text-align: center;}
.ms-pic{width: 94%;margin: 3%;border-bottom: 1rpx #DCDFE6 solid;}
.my-shear { position: relative;margin:0;width:100%;height:100%; }
.my-shear .img-s { width:100%;height:100%;position: absolute;left:0;top:0; }
.ms-user{width: 100%;height: 150rpx;display: flex;justify-content: space-between;padding: 20rpx;}
.shear-btns { position:absolute;width:100%;bottom:70rpx;left:0;display: flex;justify-content: center; }
.shear-btns .btns { width:600rpx;height:100rpx;display: flex;justify-content: center;box-shadow:0 0 10rpx #ccc;border-radius:50rpx;overflow:hidden; }
.shear-btns .btns button { flex:1;text-align: center;height:100rpx;line-height:100rpx;font-size:36rpx; }
.shear-btns .btns button:nth-child(1) { background:rgba(255,255,255,0.8);color:#666; }
.shear-btns .btns button:nth-child(2) { background:rgba(218,141,253,0.8);color:#fff; }

.ms-user image{width: 130rpx;height: 130rpx;margin: auto 0;border-radius: 50%;}
.ms-user text{font-size: 30rpx;margin: auto 0;}
.ms-pict{width: 260rpx;height: 260rpx;border: 1rpx #303133 solid;margin: 50rpx;}
.ms-us{width: 100%;border-bottom: 1rpx #DCDFE6 solid;font-size: 36rpx;padding: 20rpx;}
.ms-u{width: 100%;display: flex;justify-content: space-between;padding: 20rpx;}
.ms-u image{width: 100rpx;height: 100rpx;border-radius: 50%;margin: 8rpx;}
.ms-txt{display: flex;flex-wrap: wrap;width: 40%;margin: 8rpx;}
</style>
